/* ----------------------------------------------------------------------------------------------------
   LAYOUT STYLES
   Originally based on 960.gs - http://960.gs/ 
   Author: Philip Poole
   
   
   Contents:
    - 'Global styles
    - `Padding add to get rid of margins
    - `Column width
    - `Prefix extra space 
    - `Suffix extra space
    - `Clear floated elements
    - `Float left and right
   	
   	Notes:
   	 - all sizes are in em, the caculation used: (pixel_size / 10) / font_em_size
----------------------------------------------------------------------------------------------------*/



/* `Global styles
----------------------------------------------------------------------------------------------------*/

/* Container that grid go in */
.container_12 			{ margin-left: auto; margin-right: auto; width: 96em; padding:0 3em; }

/* Grids that go into the container */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 				{ display: inline; float: left; margin-left: 1em; margin-right: 1em; }


/* `Padding add to get rid of margins
----------------------------------------------------------------------------------------------------*/

.start 					{ margin-left: 0; }
.last 					{ margin-right: 0; }


/* `Column width
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 	{ width: 6em; }
.container_12 .grid_2 	{ width: 14em; }
.container_12 .grid_3 	{ width: 22em; }
.container_12 .grid_4 	{ width: 30em; }
.container_12 .grid_5 	{ width: 38em; }
.container_12 .grid_6 	{ width: 46em; }
.container_12 .grid_7 	{ width: 54em; }
.container_12 .grid_8 	{ width: 62em; }
.container_12 .grid_9 	{ width: 70em; }
.container_12 .grid_10 	{ width: 78em; }
.container_12 .grid_11 	{ width: 86em; }
.container_12 .grid_12 	{ width: 94em; }


/* `Prefix extra space 
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 	{ padding-left: 8em; }
.container_12 .prefix_2 	{ padding-left: 16em; }
.container_12 .prefix_3 	{ padding-left: 24em; }
.container_12 .prefix_4 	{ padding-left: 32em; }
.container_12 .prefix_5 	{ padding-left: 40em; }
.container_12 .prefix_6 	{ padding-left: 48em; }
.container_12 .prefix_7 	{ padding-left: 56em; }
.container_12 .prefix_8 	{ padding-left: 64em; }
.container_12 .prefix_10	{ padding-left: 80em; }
.container_12 .prefix_11	{ padding-left: 88em; }
.container_12 .prefix_9 	{ padding-left: 72em; }


/* `Suffix extra space
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 	{ padding-right: 8em; }
.container_12 .suffix_2 	{ padding-right: 16em; }
.container_12 .suffix_3 	{ padding-right: 24em; }
.container_12 .suffix_4 	{ padding-right: 32em; }
.container_12 .suffix_5 	{ padding-right: 40em; }
.container_12 .suffix_6 	{ padding-right: 48em; }
.container_12 .suffix_7 	{ padding-right: 56em; }
.container_12 .suffix_8 	{ padding-right: 64em; }
.container_12 .suffix_9 	{ padding-right: 72em; }
.container_12 .suffix_10 	{ padding-right: 80em; }
.container_12 .suffix_11 	{ padding-right: 88em; }



/* `Clear floated elements
----------------------------------------------------------------------------------------------------*/
/* http://www.positioniseverything.net/easyclearing.html */

.clear:after 				{ clear: both; content: '.'; display: block; visibility: hidden; height: 0; }
.clear 						{ display: inline-block; }
* html .clear				{ height: 1%; }
.clear 						{ display: block; }


/* `Float left and right - re-usable classes for left and right floats
----------------------------------------------------------------------------------------------------*/
.left { float:left; }
.right { float:right; } 